<template>
  <div class="home-dashboard">
    <headerCom>
      <section class="main-list">
        <!-- 总资产概览 -->
        <div class="asset-overview card">
          <div class="title">总资产概览</div>
          <div class="asset-list">
            <div v-for="item in assetList" :key="item.label" class="asset-item" :class="item.class">
              <div class="asset-value">{{ item.value }}</div>
              <div class="asset-label">
                <div class="color-indicator"></div>
                {{ item.label }}
              </div>
            </div>
          </div>
        </div>

        <!-- 厂区信息 -->
        <div class="area-info card">
          <div class="area-header">
            <!-- <div class="title">厂区122</div> -->
            <!-- <van-field v-model="selectedAreaText" is-link readonly @click="showAreaPicker = true" class="area-select"
            input-align="right" style="width: 140px" /> -->

            <div class="selectchang">
              <div @click="prevBanner">
                <van-icon name="arrow-left" size="16" color="#999" />
              </div>

              <span> {{ selectedAreaText.text }}</span>

              <div @click="changeBanner"><van-icon name="arrow" size="16" color="#999" /></div>
            </div>

            <!-- <van-popup v-model:show="showAreaPicker" position="bottom" round>
              <van-picker
                :columns="areaOptions"
                @confirm="onAreaConfirm"
                @cancel="showAreaPicker = false"
              />
            </van-popup> -->
          </div>
          <div class="area-content">
            <!-- <img src="@/assets/home/changfang.png" class="area-img" /> -->
            <div class="left-banner">
              <van-swipe
                ref="swipeRef"
                :show-indicators="false"
                lazy-render
                @change="onSwipeChange"
              >
                <van-swipe-item v-for="(img, i) in bannerImages" :key="i">
                  <img class="banner-img" :src="img" alt="banner" />
                </van-swipe-item>
              </van-swipe>
            </div>
            <div class="area-stats">
              <div class="stat">
                <img src="../assets/home/jifangIcon.png" alt="" class="stat-img" />
                <div class="stat-label">机房</div>
                <div class="stat-value">{{ selectedAreaText.rooms }}</div>
              </div>
              <div class="stat">
                <img src="../assets/home/wangguanIcon.png" alt="" class="stat-img" />
                <div class="stat-label">网关</div>
                <div class="stat-value">{{ selectedAreaText.gateways }}</div>
              </div>
              <div class="stat">
                <img src="../assets/home/shebeiIcon.png" alt="" class="stat-img" />
                <div class="stat-label">设备</div>
                <div class="stat-value">{{ selectedAreaText.devices }}</div>
              </div>
            </div>
          </div>
        </div>

        <!-- 机房状态 -->
        <div class="room-status card">
          <div class="title">机房状态</div>
          <div class="room-list">
            <div
              v-for="room in roomStatus"
              :key="room.name"
              class="room-item"
              :class="{ error: room.status === 'error' }"
            >
              <div class="room-header">
                <span
                  class="room-dot"
                  :class="room.status === 'error' ? 'dot-red' : 'dot-green'"
                ></span>
                <span class="room-title">{{ room.name }}</span>
              </div>
              <div class="room-meta">
                温度 {{ room.temp }}°C&nbsp; 湿度 {{ room.humidity }}%&nbsp; 烟感：{{ room.smoke }}
              </div>
            </div>
          </div>
        </div>
      </section>
    </headerCom>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import headerCom from '@/components/headerCom.vue'
import { useUserStore } from '@/stores/user'

const userStore = useUserStore()
const router = useRouter()
const logout = () => {
  localStorage.removeItem('token')
  userStore.setUserInfo({ name: '', role: '', id: '' })
  router.push('/login')
}

// 总资产概览数据
const assetList = [
  { label: '已使用', value: 1623, class: 'used' },
  { label: '未使用', value: 496, class: 'unused' },
  { label: '报警', value: 27, class: 'alarm' },
  { label: '网关', value: 31, class: 'gateway' },
  { label: '机房', value: 223, class: 'room' },
]

// 厂区下拉
const selectedArea = ref('1')

const showAreaPicker = ref(false)
const areaOptions = [
  { text: '沙阳1号厂房', value: '1', rooms: 4, gateways: 2, devices: 125 },
  { text: '沙阳2号厂房', value: '2', rooms: 1, gateways: 12, devices: 3 },
]
const selectedAreaText = ref(areaOptions[0])

// 轮播实例引用，用于控制下一张
const swipeRef = ref<any>(null)

function changeBanner() {
  // 跳到下一张
  swipeRef.value?.next()
}
const onAreaConfirm = (option: any) => {
  console.log(11, option)
  selectedArea.value = option.selectedOptions[0].value
  selectedAreaText.value = option.selectedOptions[0].text
  showAreaPicker.value = false
}

// 机房状态（增加温度/湿度/烟感字段）
const roomStatus = [
  { name: '1号配电间', status: 'ok', temp: 30, humidity: 20, smoke: '正常' },
  { name: '2号配电间', status: 'ok', temp: 30, humidity: 20, smoke: '正常' },
  { name: '3号配电间', status: 'ok', temp: 30, humidity: 20, smoke: '正常' },
  { name: '4号配电间', status: 'ok', temp: 30, humidity: 20, smoke: '正常' },
]
// 轮播图片（可替换为真实素材）
const bannerImages = [
  new URL('../assets/home/changfang.png', import.meta.url).href,
  new URL('../assets/home/changfang.png', import.meta.url).href,
]

function prevBanner() {
  swipeRef.value?.prev()
}

// 当前轮播索引
const currentBannerIndex = ref(0)

// 轮播切换时，用索引匹配 areaOptions 的 text
function onSwipeChange(index: number) {
  currentBannerIndex.value = index
  selectedAreaText.value = areaOptions[index]
}

onMounted(() => {
  // 初始化时根据默认索引设置显示文本
  selectedAreaText.value = areaOptions[currentBannerIndex.value]
})
</script>

<style lang="less" scoped>
.home-dashboard {
  min-height: 100vh;
  // padding: 16px;

  .card {
    background: #fff;
    border-radius: 12px;
    padding: 20px;
    margin-top: 16px;
    box-shadow: 0 2px 8px #f0f1f2;
  }

  .title {
    font-weight: bold;
    font-size: 16px;
    margin-bottom: 16px;
    color: #222222;
  }

  .asset-list {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;

    .asset-item {
      width: calc((100% - 32px) / 3); // 3个一行，2个gap
      background: #f7fafd;
      border-radius: 8px;
      padding: 2px 12px;
      text-align: center;
      box-sizing: border-box;
      margin-bottom: 0; // 保证竖直方向只用gap

      .asset-value {
        font-size: 22px;
        font-weight: bold;
        color: #222222;
      }

      .asset-label {
        font-size: 13px;
        margin-top: 4px;
        position: relative;
        display: flex;
        align-items: center;
        justify-self: center;

        .color-indicator {
          width: 3px;
          height: 12px;
          // position: absolute;
          // right: -8px;
          // top: 50%;
          // transform: translateY(-50%);
          border-radius: 1px;
          position: relative;
          left: -6px;
        }
      }

      &.used .asset-label {
        color: #52c41a;

        .color-indicator {
          background-color: #52c41a;
        }
      }

      &.unused .asset-label {
        color: #1677ff;

        .color-indicator {
          background-color: #1677ff;
        }
      }

      &.alarm .asset-label {
        color: #ff4d4f;

        .color-indicator {
          background-color: #ff4d4f;
        }
      }

      &.gateway .asset-label {
        color: #b37feb;

        .color-indicator {
          background-color: #b37feb;
        }
      }

      &.room .asset-label {
        color: #409eff;

        .color-indicator {
          background-color: #409eff;
        }
      }
    }
  }

  .area-info {
    .area-header {
      display: flex;
      justify-content: space-between;
      align-items: center;

      .area-select {
        min-width: 120px;
        max-width: 160px;
      }
    }

    .area-content {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: 10px;

      .area-img {
        width: 130px;
        height: 130px;
        margin-right: 24px;
      }

      .area-stats {
        width: 130px;

        .stat {
          display: flex;
          align-items: center;
          gap: 4px;

          .stat-img {
            width: 16px;
            height: 16px;
            margin-right: 4px;
          }

          .stat-label {
            font-size: 14px;
            color: #888;
            margin-right: 4px;
          }

          .stat-value {
            font-size: 20px;
            font-weight: bold;
            color: #222222;
          }
        }
      }
    }
  }

  .room-status {
    .room-list {
      display: flex;
      flex-wrap: wrap;
      gap: 16px;

      .room-item {
        width: calc((100% - 16px) / 2);
        background: #eef2f6;
        border-radius: 14px;
        padding: 8px;
        border: none; /* 去掉描边，柔和卡片感 */
      }

      .room-header {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-bottom: 8px;
      }

      .room-dot {
        width: 14px;
        height: 14px;
        border-radius: 50%;
        display: inline-block;
      }
      .dot-green {
        background: #52c41a;
      }
      .dot-red {
        background: #ff4d4f;
      }

      .room-title {
        font-size: 14px;
        font-weight: 700;
        color: #2f3a46;
      }

      .room-meta {
        font-size: 12x; /* 缩小标题字号 */
        // font-weight: 400;
        color: #2f3a46;
      }

      .room-meta {
        font-size: 14px; /* 缩小描述字号 */
        color: #5f6b7a;
      }

      /* 保留错误态（如果需要红框可启用） */
      & .error {
        // border: 1.5px solid #ff4d4f;
      }
    }
  }
}

.main-list {
  padding: 0 16px;
}
.selectchang {
  color: #222222;
  display: flex;
  align-items: center;
}

.left-banner {
  width: 160px;
  height: 140px; /* 根据视图需要可调整高度 */
  border-radius: 12px;
  overflow: hidden;

  .van-swipe {
    width: 100%;
    height: 100%;
  }
  .banner-img {
    width: 160px;
    height: 100%;
    object-fit: cover;
    display: block;
  }
}
</style>
